import { useIntersectionObserver } from '@vueuse/core'
//定义懒加载插件
export const lazyPlugin = {
  install(app) {
    //懒加载指令逻辑
    //定义全局指令
    //指令名称为 img-lazy，可以在 Vue 模板中使用 v-img-lazy 来绑定这个指令。

    app.directive('img-lazy', {
      mounted(el, binding) {
        // el 是指令绑定的元素（图片元素）
        // binding.value 是指令绑定的值（图片 URL）

        // 使用 IntersectionObserver 监听元素是否进入视口
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          console.log(isIntersecting);
          if (isIntersecting) {
            // 当元素进入视口时，将图片的 src 设置为绑定的 URL el就是<img>
            //   v-img-lazy="'https://example.com/image.jpg'"，binding.value 就是 'https://example.com/image.jpg'。
            el.src = binding.value;
            stop()
          }
        });
      },
    });

  }
}